<template>
  <el-menu 
  router
  background-color="#304156"
  text-color="#fff"
  active-text-color="#1890ff"
  :unique-opened="true"
  :default-active="$router.path == undefined ? '/index' : $router.path"
  class="el-menu-vertical-demo" 
  @open="handleOpen" 
  @close="handleClose" 
  :collapse="isCollapse">
  <el-button type="text" @click="isCollapse = !isCollapse">按钮</el-button>
  <!-- 首页 -->
  <el-menu-item index="/index">
    <i class="el-icon-setting"></i>
    <span slot="title">首页</span>
  </el-menu-item>
  <!-- 这里渲染有子集的菜单 -->
  <el-submenu :index="item.id" v-for="item in menuList" :key="item.id">
    <template slot="title">
      <i :class="item.icons"></i>
      <span slot="title">{{item.title}}</span>
    </template>
    <el-menu-item-group >
      <el-menu-item :index="val.routers" v-for="val in item.submenus" :key="val.id">
        <i :class="item.icons"></i>
        <span slot="title">{{val.title}}</span>
      </el-menu-item>
    </el-menu-item-group>
  </el-submenu>
</el-menu>
</template>

<script>
export default {
  name: 'Aside',
  data(){
    return {
      paths:this.$router.path,
      isCollapse:false,
      //菜单数据列表
      menuList:[
        {id:'1',icons:'el-icon-location',title:'系统管理',
          submenus:[
            {id:'1-1',icons:'el-icon-location',title:'用户管理',routers:'user'},
            {id:'1-2',icons:'el-icon-location',title:'角色管理',routers:'2'},
            {id:'1-3',icons:'el-icon-location',title:'菜单管理',routers:'2'},
            {id:'1-4',icons:'el-icon-location',title:'部分管理',routers:'3'},
            {id:'1-5',icons:'el-icon-location',title:'岗位管理',routers:'3'},
            {id:'1-6',icons:'el-icon-location',title:'字典管理',routers:'4'},
            {id:'1-7',icons:'el-icon-location',title:'调度管理',routers:'5'},
          ],
        },
        // {id:'2',icons:'el-icon-location',title:'系统监控',
        //   submenus:[
        //     {id:'2-1',icons:'el-icon-location',title:'在线用户',routers:''},
        //     {id:'2-2',icons:'el-icon-location',title:'操作日志',routers:''},
        //     {id:'2-3',icons:'el-icon-location',title:'异常日志',routers:''},
        //     {id:'2-4',icons:'el-icon-location',title:'服务监控',routers:''},
        //     {id:'2-5',icons:'el-icon-location',title:'SQL监控',routers:''},
        //   ],
        // },
        // {id:'3',icons:'el-icon-location',title:'运维管理',
        //   submenus:[
        //     {id:'3-1',icons:'el-icon-location',title:'服务器',routers:''},
        //     {id:'3-2',icons:'el-icon-location',title:'应用管理',routers:''},
        //     {id:'3-3',icons:'el-icon-location',title:'部署管理',routers:''},
        //     {id:'3-4',icons:'el-icon-location',title:'部署应用',routers:''},
        //     {id:'3-5',icons:'el-icon-location',title:'数据库备份',routers:''},
        //   ],
        // },
        // {id:'4',icons:'el-icon-location',title:'监控大屏',
        //   submenus:[
        //     {id:'4-1',icons:'el-icon-location',title:'智慧交通',routers:''},
        //     {id:'4-2',icons:'el-icon-location',title:'智慧城市',routers:''},
        //     {id:'4-3',icons:'el-icon-location',title:'智慧物流',routers:''},
        //     {id:'4-4',icons:'el-icon-location',title:'智慧电商',routers:''},
        //     {id:'4-5',icons:'el-icon-location',title:'智慧气象',routers:''},
        //   ],
        // }
      ]
    }
  },
  methods:{
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-menu{
  height:100%;
}
</style>
